import React, { Component } from 'react'
import { withRouter } from 'react-router'
import De from './DyDetail.module.css'
import Comments from '../../components/comments'
import { getDydetail, adjustFocus, addFocus,addDy } from '../../api/community'
import { PageHeader, Button, Avatar, Divider, message,Input } from 'antd';
import { ShareAltOutlined, UserOutlined, CheckOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
const { Search } = Input;
class DynamicDetail extends Component {
  state = {
    uid:1,
    focus: true,
    liked: false,
    img: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20100%2F356%2Fw900h1056%2F20190514%2F7218-hwzkfpt9678956.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620404682&t=9d54a00b4e490bfc46ad800ff5ce2cde',
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F7n.11jd.com%2Fbb0emdeg45j98.jpg&refer=http%3A%2F%2F7n.11jd.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620404681&t=680aa67bff197cd0baa9a4092a4cad3b'
      , 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20100%2F356%2Fw900h1056%2F20190514%2F7218-hwzkfpt9678956.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620404682&t=9d54a00b4e490bfc46ad800ff5ce2cde',],
    comments: [],
    res: [],
    message:{},
    value:''
  }
  componentDidMount() {
    let { mid,uid } = this.props.location.state
    getDydetail({ mid }).then(res => {
      console.log(res)
      this.setState({ comments: res.data.messageList })
      this.state.comments.forEach(el => {
        el.children = this.state.comments.filter(wl => wl.faid === el.mid)
      })
      this.state.res = this.state.comments.filter(e => e.faid === mid)
      this.setState({message:{...res.data.message,mtime:res.data.message.mtime.substring(0,10)}})
      console.log(this.state.res)
    })

    adjustFocus({ uid: 1, meid: uid }).then(res => {
      this.setState({ focus: res.data })
    })
  }
  clickLike() {
    let str = this.state.liked ? '取消点赞' : '淦谢点赞'
    message.success(str);
    this.setState({ liked: !this.state.liked })
  }
  clickFocus() {
    addFocus({ fid: 1, sid: this.props.location.state.mid }).then(res => {
      let str = this.state.focus ? '取消关注' : '淦谢关注'
      message.success(str);
      this.setState({ focus: !this.state.focus })
    })
  }
  addDynamic(value){
    addDy({
      // faid:this.props.location.state.mid + '',
      message:{
        mtext:value,
        uid:5,
        faid:this.props.location.state.mid,
        del:0
      }
      
    }).then(res=>{
      console.log(res)
    })
  }
  render() {
    return (
      <div>
        <div className={De.fixx}>
          <Search
            placeholder="说出你的想法..."
            allowClear={true}
            onChange={(value)=>{this.state.value = value}}
            enterButton="Search"
            size="large"
            onSearch={(value)=>this.addDynamic(value)}
            enterButton={<Button type="primary">发表</Button>}
          />
        </div>
        <div className="site-page-header-ghost-wrapper">
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title="动态详情"
            extra={[
              <Button type="text" icon={<ShareAltOutlined style={{ fontSize: '.5rem' }} />}></Button>
            ]}
          >
          </PageHeader>
        </div>

        <div className={De.container}>
          <div className={De.header}>
            <div className={De.til}>
              <Avatar onClick={()=>{this.props.history.push('/Dyuser',{faid:this.props.location.state.uid})}} className={De.avatar} shape="square" icon={<UserOutlined />} />
              <div className={De.title}>
                <div className={De.username}>{this.state.message.username}</div>
                <div className={De.desc}>{this.state.message.mtime}</div>
              </div>
            </div>
            {!this.state.focus ? <Button onClick={() => this.clickFocus()}>+关注</Button> : <Button onClick={() => this.clickFocus()} icon={<CheckOutlined />}>取消关注</Button>}
          </div>

          <div className={De.info}>
            <div className={De.text}>sadasdasd </div>
            <div className={De.imgCon}>
              {
                this.state.img.map(el => <img className={De.img} src={el} />)
              }
            </div>

            <div style={{ marginLeft: '.1rem', fontSize: '.3rem', fontWeight: 'bold' }}>{this.state.message.label}</div>
          </div>
          <div className={De.likeArea}>
            <div className={De.likePeople}>
              <div className={De.right}><Avatar className={De.avatar} shape="square" icon={<UserOutlined />} /></div>
              <div className={De.right}><Avatar className={De.avatar} shape="square" icon={<UserOutlined />} /></div>
              <div className={De.right}><Avatar className={De.avatar} shape="square" icon={<UserOutlined />} /></div>
              <div className={De.right}><Avatar className={De.avatar} shape="square" icon={<UserOutlined />} /></div>
              <span style={{ fontSize: '.2rem' }}>{this.state.message.likenumber}个淦</span>
            </div>
            {this.state.liked ? <LikeFilled size={30} onClick={() => this.clickLike()} /> : <LikeOutlined size={30} onClick={() => this.clickLike()} />}
          </div>
          <Divider />
          <div className={De.CommentCo}>
            <div style={{ marginBottom: '.2rem' }}>
              <span style={{ marginRight: '.1rem', fontWeight: 'bold', fontSize: '.3rem' }}>评论</span>
              <span style={{ marginRight: '.1rem', fontWeight: 'bold', fontSize: '.3rem' }}>{this.state.res.length}</span>
            </div>
            <div className={De.coCo}>
              {
                this.state.res.map((el, i) => <Comments key={el.mid} {...el}></Comments>)
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(DynamicDetail)
